<template>
	<view class="">
		<!-- <button class="button-cc" @click="goIndex()">
            返回首页
        </button> -->


		<canvas canvas-id="receiptCanvas" :style="{ width: '300px', height: totalHeight + 'px' }"
			style="margin-top: 20rpx;"></canvas>
	</view>

</template>
<script>
	import {
		mapState
	} from "vuex";
	export default {
		computed: {
			...mapState('goods', ['printerOrderList']),
			...mapState('user', ['userinfo'])
		},
		data() {
			return {
				totalHeight: 0,
				list: [],
				imageDataURL: '',
				items: []
			}
		},
		mounted() {
			// 设置canvas画布的高度
			const lineHeight = 20; // 每行的高度
			const headerHeight = 110; // 标题和表头的高度
			const footerHeight = 240; // 底部信息和商家信息的高度
			const goodsLines = this.items.length;
			const goodsHeight = goodsLines * lineHeight;
			const totalHeight = headerHeight + goodsHeight + footerHeight;
			this.totalHeight = `${totalHeight}`;

			this.$nextTick(() => {
				this.handleCreateImg()
			})
		},
		 onUnload() {
			//#ifdef MP-WEIXIN
			wx.reLaunch({
				url: '/pages/order/order?state=2'
			})
			//#endif
		},
		onBackPress(e) {
			return uni.switchTab({
				url: '/pages/order/order?state=2'
			})
		},
		onLoad() {
			const items_json = JSON.parse(this.printerOrderList.items_json)
			const flattenedItems = items_json.map(item => ({
				goodid: item.goodid,
				goodname: item.goodname,
				picture: item.picture,
				buynumber: item.buynumber,
				price: item.price,
				discountprice: item.discountprice
			}))
			this.list = this.printerOrderList
			this.items = flattenedItems
		},
		methods: {
			goIndex() {
				return uni.switchTab({
					url: '/pages/index/index'
				})
			},
			handleCreateImg() {
				const ctx = uni.createCanvasContext('receiptCanvas')
				// 设置背景色为白色
				ctx.setFillStyle('white')
				// 计算所需的 canvas 高度
				// 设置 canvas 的尺寸
				ctx.fillRect(0, 0, 300, this.totalHeight); // 这里的坐标 (0, 0) 表示从左上角开始，宽300px、高400px是之前设置的canvas尺寸
				// ctx.fillRect(0, 0, 300, 600); // 这里的坐标 (0, 0) 表示从左上角开始，宽300px、高400px是之前设置的canvas尺寸
				// 后续设置绘图样式以及绘制小票内容等操作
				ctx.setFontSize(14)
				ctx.setTextAlign('left')
				ctx.setTextBaseline('top')
				ctx.setFillStyle('black')
				ctx.font = '20px Arial'
				ctx.fillText(`${this.userinfo.id}`, 10, 20)
				ctx.beginPath()
				ctx.setLineDash([5, 5])
				ctx.moveTo(10, 50) // 起点坐标
				ctx.lineTo(290, 50) // 终点坐标，宽度是之前设置的300px，适当减去一点边界值
				ctx.setStrokeStyle('black') // 设置线条颜色为灰色
				ctx.setLineWidth(1) // 设置线条宽度
				ctx.stroke()
				ctx.font = '14px Arial'
				ctx.fillText('商品', 10, 60)
				ctx.fillText('单价', 180, 60)
				ctx.fillText('数量', 240, 60)
				let y = 90 // 起始纵坐标，从分割线下方开始
				this.items.forEach(item => {
					ctx.fillText(`${item.goodname} `, 10, y) // 商品名称
					ctx.fillText(`${item.price} `, 180, y) // 商品单价
					ctx.fillText(`${item.buynumber}`, 240, y) // 商品数量
					y += 20 // 每绘制一行商品信息，纵坐标往下移动一定距离，便于换行显示
				})
				ctx.fillText(`订单号: ${this.list.orderid}`, 10, y += 20)
				ctx.fillText(`联系人: ${this.userinfo.mobile}`, 10, y += 20)
				ctx.fillText(`商品总计: ${this.list.total}`, 10, y += 20)
				ctx.fillText(`地址:  ${this.list.address}`, 10, y += 20)
				ctx.fillText(`实付: ${this.list.total}`, 10, y += 20)
				ctx.fillText(`下单时间: ${this.list.addtime}`, 10, y += 20)
				// 绘制虚线
				ctx.beginPath()
				ctx.setLineDash([5, 5])
				ctx.moveTo(10, y += 40) // 起点坐标
				ctx.lineTo(290, y) // 终点坐标，宽度是之前设置的300px，适当减去一点边界值
				ctx.setStrokeStyle('black') // 设置线条颜色为灰色
				ctx.setLineWidth(1) // 设置线条宽度
				ctx.stroke()
				// 绘制虚线
				ctx.beginPath()
				ctx.setLineDash([5, 5]) // 第一个参数表示线段长度，第二个参数表示间隔长度  绘制虚线
				ctx.moveTo(10, y += 20)
				ctx.lineTo(290, y)
				ctx.strokeStyle = 'black'
				ctx.lineWidth = 1
				ctx.stroke()
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'receiptCanvas',
						success: (res) => {
							const imageDataURL = res.tempFilePath
							this.imageDataURL = imageDataURL
						},
						fail: (err) => {}
					})
				})
			},
			// 保存图片
			saveReceiptImage(url) {
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
						uni.showToast({
							title: '图片保存成功',
							duration: 2000
						});
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							title: '图片保存失败，请检查权限等设置',
							duration: 2000
						});
					}
				});
			},
			// 预览图片
			handleLook(url) {
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
					// 长按保存图片
					longPressActions: {
						itemList: ['保存图片'],
						success: function(ress) {
							uni.saveImageToPhotosAlbum({
								filePath: url,
								success: () => {
									uni.showToast({
										title: '图片保存成功',
										duration: 2000
									});
								},
								fail: (err) => {
									console.log(err);
									uni.showToast({
										title: '图片保存失败，请检查权限等设置',
										duration: 2000
									});
								}
							});
						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					}
				})
			},
		}
	}
</script>
<style scoped>
	.button-cc {
		background-color: #007aff;
	}
</style>